import React, { useState, useEffect } from 'react';
import { useModel } from 'umi';
import SearchList from '@/components/SearchList';
import { Table, Button, Modal, Tooltip, notification } from 'antd';
import API from '@/api/xjindex.js';

import {
  paginationOptions,
  transFormIndex,
  showDeleteConfirm,
} from '@/utils/util';
import {
  EyeFilled,
  EditOutlined,
  DeleteFilled,
  PlusCircleFilled,
} from '@ant-design/icons';

// 信息上报
const reportInfor = ({ history }) => {
  const { initialState = {} } = useModel('@@initialState');
  const { userRoleId = '' } = initialState.info;
  const [dataSource, setDataSource] = useState([]);
  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
  });
  const [pagination, setPagination] = useState({ ...paginationOptions });
  const reportTypeOptions = [
    {
      label: '工作情况',
      value: 1,
    },
    {
      label: '安全事件',
      value: 2,
    },
  ];
  const searchList = [
    {
      name: 'orgName',
      title: '上报单位',
      type: 'input',
    },
    {
      name: 'reportType',
      title: '上报类型',
      type: 'select',
      otherProps: {
        options: reportTypeOptions,
      },
    },
    {
      name: 'createTime',
      title: '上报时间',
      type: 'datepicker',
    },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '标题',
      dataIndex: 'title',
      align: 'center',
    },
    {
      title: '上报单位',
      dataIndex: 'orgName',
      align: 'center',
    },
    {
      title: '上报类型',
      dataIndex: 'reportType',
      align: 'center',
      render: (text) =>
        reportTypeOptions.find((el) => {
          return el.value == text;
        }).label,
    },
    {
      title: '上报人',
      dataIndex: 'userName',
      align: 'center',
    },
    {
      title: '上报时间',
      dataIndex: 'updateTime',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (text, r) => (
        <div>
          <Tooltip title="查看">
            <Button
              type="link"
              icon={<EyeFilled />}
              className="table-icon"
              onClick={dispatchFn.bind(null, {
                type: 0,
                id: r.id,
                reportType: r.reportType,
              })}
            ></Button>
          </Tooltip>
          {userRoleId === '2' ? (
            ''
          ) : (
            <>
              <Tooltip title="编辑">
                <Button
                  type="link"
                  icon={<EditOutlined />}
                  className="table-icon"
                  onClick={dispatchFn.bind(null, {
                    type: 1,
                    id: r.id,
                    reportType: r.reportType,
                  })}
                ></Button>
              </Tooltip>
              <Tooltip title="删除">
                <Button
                  type="link"
                  icon={<DeleteFilled />}
                  className="table-icon"
                  onClick={() => showDeleteConfirm(delFn.bind(null, r.id))}
                ></Button>
              </Tooltip>
            </>
          )}
        </div>
      ),
    },
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const createLink = (choice) => {
    history.push('/networkInfor/reportInfor/' + choice);
  };

  // 查看 or 编辑
  const dispatchFn = (action) => {
    const reportTypes = {
      1: 'work',
      2: 'safe',
    };
    const types = ['Detail', 'Edit'];
    history.push({
      pathname: `/networkInfor/reportInfor/${
        reportTypes[action.reportType] + types[action.type]
      }`,
      query: {
        id: action.id,
      },
    });
  };

  // 删除
  const delFn = (id) => {
    API.delReport({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList();
      }
    });
  };

  const initList = (
    data = { orgName: '', reportType: '-1', createTime: '' },
  ) => {
    for (const key in data) {
      if (data[key] === undefined) {
        key === 'reportType' ? (data[key] = '-1') : (data[key] = '');
      }
    }
    const values = { ...params, ...data };
    if (values?.createTime) {
      values.createTime = values.createTime.format('YYYY-MM-DD');
    }
    API.getReport(values).then((res) => {
      if (res?.t) {
        setDataSource(res.t.queryList);
        setPagination({
          ...pagination,
          current: res.t.currentPage,
          pageSize: res.t.pageSize,
          total: res.t.totalSize,
        });
      }
    });
  };

  const changeTable = (pagination) => {
    setParams({
      ...params,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    });
  };

  useEffect(() => {
    initList();
  }, [params]);

  return (
    <>
      <SearchList searchList={searchList} initList={initList}></SearchList>
      <div className="main-x bgf">
        {/* {userRoleId === '2' ? (
          ''
        ) : ( */}
        <>
          <div className="tools-x">
            <Button
              type="link"
              icon={<PlusCircleFilled />}
              className="btn-icon"
              onClick={showModal}
            >
              新增
            </Button>
            <Modal
              title="请选择事件上报的类型"
              visible={isModalVisible}
              onCancel={handleCancel}
              footer={null}
            >
              <div className="modal">
                <Button
                  type="primary"
                  onClick={createLink.bind(null, 'safeCreate')}
                >
                  安全事件
                </Button>
                <Button
                  type="primary"
                  onClick={createLink.bind(null, 'safeMonthlyCreate')}
                >
                  安全月报
                </Button>
                <Button
                  type="primary"
                  onClick={createLink.bind(null, 'workCreate')}
                >
                  工作情况
                </Button>
              </div>
            </Modal>
          </div>
        </>
        {/* )} */}
        <Table
          columns={columns}
          rowKey="id"
          dataSource={dataSource}
          pagination={pagination}
          className="custom-table"
          onChange={changeTable}
        ></Table>
      </div>
    </>
  );
};

export default reportInfor;
